<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <!-- <div class="dashboard-avatar">
      <img :src="avatar" alt="User Avatar" class="avatarimage">
    </div> -->
    <div class="dashboard-avatar">
      <img
        class="avatar"
        alt="avatar"
        v-if="form.avatar"
        :src="$baseUrl + '/' + form.avatar"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return{
      form:{
        avatar:"",
      },
      baseUrl: this.$baseUrl,
    }
  },
  name: "Dashboard",

  computed: {
    ...mapGetters(["name", "avatar"]),
     avatarUrl() {
      return this.avatar;
    }
  },
  methods: {
    // 头像上传
    handleAvatarSuccess(res, file) {
      //上传成功之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.user.avatar = res.data;
      console.log(this.user.avatar);
    },
    beforeAvatarUpload(file) {
      //限制文件类型及大小
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess1(res, file) {
      //上传成功之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.form.avatar = res.data;
      console.log(this.form.avatar);
    },
    beforeAvatarUpload1(file) {
      //限制文件类型及大小
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .avatarimg {
    width: 100px;
    height: 100px;
    border: 1px;
    border-radius: 50%;
  }

  // .avatarimage {
  //   width: 100px;
  //   height: 100px;
  //   border-radius: 50%;
  // }
}
</style>
